import './common/base.scss'
import 'bootstrap/dist/css/bootstrap.min.css'
import './sass/user.scss'

import {strToObj} from './common/utils'
import axios from 'axios';

// 导入header的结构
import {createHtml} from './common/headerHtml'

let header1=document.querySelector('.header1 .jd-container')
header1.innerHTML=createHtml('./')

// 导入header的实现功能
import {header} from './common/header'


// 从本地存储中获取用户相关信息
let avactarImg=document.querySelector('.avatar img')
let leftUser=document.querySelector('.username')
let leftDesc=document.querySelector('.desc')
let formContent=document.querySelector('.content')
let rightuser=document.querySelector('#username')
let rightgender=document.querySelector('#gender')
let rightcity=document.querySelector('#city')
let rightdesc=document.querySelector('#desc')
// 这个img是一个路径：'http://localhost:8081/images/avatar.e38d5c3e7a75fcf91c19.webp
// img用到了就会被打包
// 在模块化中使用图片，不能直接写图片路径
// 只能先导入后使用，因为直接写路径到时候打包之后就找不到
 import img from './images/avatar.webp'
console.log(avactarImg,leftUser,leftDesc,formContent,rightuser,rightgender,rightcity,rightdesc,img);

// 不仅初始化了头部，还获取到了用户信息，在第一次渲染中，可以从中拿数据渲染
header()
// 初始化渲染
render()

async function render(){
    let userInfo=JSON.parse(localStorage.getItem('userInfo'))
    // 左边的名字
    leftUser.innerHTML=userInfo.user_name
    // 左边的描述，如果userInfo中没有,则用这个替代
    leftDesc.innerHTML=userInfo.ms||'我比较懒，暂时没有秒杀'
    // 头像 同理
    avactarImg.src=userInfo.user_avatar||img
    // 右边名字
    rightuser.value=userInfo.user_name;
    // 右边的性别选择框 userInfo中是男则显示男 这个value是必写的，写了可以通过.value获得显示的值
    rightgender.innerHTML = `
        <option value="男"  ${userInfo.sex == '男' ?'selected':''}>男</option>
        <option value="女" ${userInfo.sex == '女' ?'selected':''}>女</option>
    `
    // 右边的描述
    rightdesc.value = userInfo.ms || '我比较懒，暂时没有描述';
    // 右边的城市选择
    let {data:{data}}=await axios.get('/api/city/citylist')
    rightcity.innerHTML=data.map(item=>{
        return  `<option value="${item.name}" ${item.name == userInfo.city ?'selected' :''}>${item.name}</option>`
    })
}
// 前端传递：图片文件，用户名，性别，城市，描述到后端
// 涉及到文件的，都不能以对象的形式传递
// 得用formData数据类型的形式传递
// 获取类型为file的input元素
// 前端选择文件，唯一的方法就是使用<input type='file'>
let file=document.querySelector('.file');

// 这段代码的功能是选择一个文件后，使用 FileReader 对象将文件读取为 Data URL 字符串，并将结果显示在 HTML 页面中指定的图像元素上。
file.onchange=()=>{
    // 创建一个新的 FileReader 对象，用于读取文件内容。
    let reader=new FileReader()
    // 使用 readAsDataURL 方法将文件读取为基于 Data URL 的字符串。file.files[0] 表示选择的文件中的第一个文件。
    reader.readAsDataURL(file.files[0])
    // 设置 reader 对象的 onload 事件处理程序，当文件加载完成时触发,就是在点击选择打开的之后会执行
    reader.onload=(e)=>{
        // 将读取到的文件结果赋值给他当地址
        avactarImg.src=e.target.result
    }
}

// 发送修改的请求
formContent.onsubmit = async (e)=>{
    // 阻止默认事件
    e.returnValue = false;
    
    // 创建formData数据，把图片文件以及用户名等存放在formData中
    // 最后把formData数据传递给后端
    let formdata=new FormData()
    formdata.set('username',rightuser.value)
    formdata.set('sex',rightgender.value)
    formdata.set('city',rightcity.value)
    formdata.set('ms',rightdesc.value)

    // 图片的上传并不是上传路径，而是整个图片文件
    // file.files ，得到的数组，表示文件列表
    // 需要得到数组中的这个文件：file.files[0] 得到单独这个文件
    formdata.set('avatar',file.files[0])
    // 发送修改用户信息的ajax请求
    let {data} = await axios({
        url: '/api/user/updateUser',
        method: 'post',
        headers: {
            "authorization":localStorage.getItem('token')
        },
        data:formdata
    })

    if (data.code == 400) {
        alert(data.msg)
        return
    }
    
    // 重新刷新浏览器
    // location.reload();
    confirm('修改成功')
    await header()
    render();
}
















